<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head">
    <meta charset="UTF-8">
    <title>竹简</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/lib/editormd/css/editormd.min.css" th:href="@{/css/editormd.min.css}">
    <link rel="stylesheet" href="../static/css/me-index.css" th:href="@{/css/me-index.css}">
    <link rel="stylesheet" href="../static/css/iconfont.css" th:href="@{/css/iconfont.css}">
    <script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="../static/js/semantic.min.js" th:src="@{/js/semantic.min.js}"></script>
    <script src="../static/js/index.js" th:src="@{/js/index.js}"></script>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1582166_jr72lggbz4j.css"
          th:href="@{//at.alicdn.com/t/font_1582166_jr72lggbz4j.css}">
</head>
<script src="../static/js/myaccount.js" th:src="@{/js/myaccount.js}"></script>
<body>
<div class="ui grid">
    <div class="row">
        <div class="eight wide column">
            <!-- <img src="../static/img/yifabiao.png">-->
        </div>
        <div class="ui eight wide column me-control-group">
            <div class="ui middle segment center aligned grid me-mall-border-color m-width-myacc">
                <div class="column"
                     style="margin: 4.5em!important; margin-bottom: 1.5em!important;margin-top: 2em!important;">
                    <div class="me-multiuse-login-kua">
                        <div>
                            <h3 class="ui image">
                                <div class="content">
                                    验证码注册
                                </div>
                            </h3>
                            <form class="ui form attached fluid" name="enrollInfo" id="enroll" th:action="@{/getPhone}"
                                  method="post" >
                                <!--                  <div class="ui error message">     th:onsubmit="'return validateMsgCode();'"
                                                      <div class="header" id="error">请求正确填写注册信息哦!</div>
                                                  </div>-->
                                <div class="field">
                                    <div class="ui left icon input">
                                        <i class="user icon"></i>
                                        <input type="text" name="username" placeholder="用户名">
                                    </div>
                                </div>
                                <div class="field">
                                    <div class="ui left icon input">
                                        <i class="mobile alternate icon"></i>
                                        <input type="text" name="memPhone" id="memPhone" placeholder="手机号">
                                    </div>
                                </div>
                                <div class="field">
                                    <div class="ui grid">
                                        <div class="row">
                                            <div class="eight wide column">
                                                <div class="ui left icon input">
                                                    <i class="envelope square icon"></i>
                                                    <input type="text" name="msgCode" placeholder="短信验证码">
                                                </div>
                                            </div>
                                            <div class="eight wide column">
                                                <input  type="button" class="ui positive button msg" id="getMsgNum" value="发送验证码"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="field">
                                    <div class="ui left icon input">
                                        <i class="shield alternate icon"></i>
                                        <input type="password" name="password" id="msmPassword" placeholder="6-16位的密码,可由数字、字符、字母组成">
                                    </div>
                                </div>

                                <input class="fluid teal ui button" id="msm" type="submit" value="提 交"/>
                            </form>
                        </div>
                        <div>
                            <form class="ui form attached fluid" method="post" action="#" th:action="@{/doreg}">
                                <h3 class="ui image">
                                    <div class="content">
                                        账号注册
                                    </div>
                                </h3>
                                <div class="field">
                                    <div class="ui left icon input">
                                        <i class="user icon"></i>
                                        <input type="text" name="username" placeholder="用户名">
                                    </div>
                                </div>
                                <div class="field">
                                    <div class="ui left icon input">
                                        <i class="mobile alternate icon"></i>
                                        <input type="text" name="memPhone" placeholder="邮箱">
                                    </div>
                                </div>
                                <div class="field">
                                    <div class="ui grid">
                                        <div class="row">
                                            <div class="eight wide column">
                                                <div class="ui left icon input">
                                                    <i class="envelope square icon"></i>
                                                    <input type="text" name="msgCode" placeholder="邮箱验证码">
                                                </div>
                                            </div>
                                            <div class="eight wide column">
                                                <input  type="button" class="ui positive button msg" value="发送验证码"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="field">
                                    <div class="ui left icon input">
                                        <i class="lock icon"></i>
                                        <input type="password" id="password" name="password" placeholder="密码">
                                    </div>
                                </div>
                                <input class="fluid orange ui button" id="zhmm" type="submit" value="注  册"/>
                                <!--           onclick="md5_encryption()"        -->
                                <div class="ui error mini message"></div>
                            </form>
                        </div>
                        <div class="">
                            暂时没有此功能
                        </div>
                        <div class="">
                            暂时没有此功能
                        </div>
                    </div>
                    <div class="ui grid center aligned" style="margin-top: 0.5em">
                        <div class="row">
                            <div class="eight wide column"><a href="#">忘记密码？</a></div>
                            <div class="eight wide column" id="tishikuang"></div>
                        </div>
                    </div>
                    <div class="ui six column grid center aligned me-cursor" style="margin-top: 2em">
                        <div class="row">
                            <div class="column me-multiuse-login-xuan border-bottom-style border-color-orange m-padded-muan-lr"><i class="iconfont icon-shouji"
                                                                                                                                   style="font-size: 2em; color: orange"></i>
                            </div>
                            <div class="column me-multiuse-login-xuan"><i class="iconfont icon-mimadenglu"
                                                                          style="font-size: 2em; color: #bddbff"></i>
                            </div>
                            <div class="column me-multiuse-login-xuan"><i class="iconfont icon-weixin"
                                                                          style="font-size: 2em; color: #4CB202"></i>
                            </div>
                            <div class="column me-multiuse-login-xuan"><i class="iconfont rgb icon-QQ"
                                                                          style="font-size: 2em; color: #2eb1f1"></i>
                            </div>
                        </div>
                    </div>
                    <div class="ui right corner label me-position-relative">
                        <a href="login">
                            <i class="iconfont icon-zhuce"
                               style="font-size: 3em;font-weight:normal"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<footer th:fragments="footer" class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
        <div class="ui inverted stackable icon divided grid">
            <div class="three wide column"></div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced m-opacity-mini"><i
                        class="weibo icon"></i>最新微博
                </h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事（User Story）</a>
                    <a href="#" class="item">关于刻意练习清单</a>
                    <a href="#" class="item">tp5框架练习（一）</a>
                </div>
            </div>
            <div class="three wide column">
                <h5 class="ui inverted header m-text-thin m-text-spaced m-opacity-mini"><i
                        class="tty icon"></i>联系我们
                </h5>
                <div class="ui inverted link list">
                    <a href="#" class="item"><i class="envelope outline icon"></i>Email:2629770174@qq.com</a>
                    <a href="#" class="item"><i class="qq icon"></i>QQ:2629770174</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header">GeDa</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mini">Mailing address
                    ：广东省广州市江高镇</p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-mini">百度提供站内搜索 京ICP备56757604658号
            ©2018-2019 广州硌哒网络技术有限公司</p>
    </div>
</footer>
<!--<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>-->
<script>
       $("#msm").click(function () {
           /*document.getElementById("msm").value="登陆中";*/
        //获取密码
        var inputPass = $("#msmPassword").val();
        //获取固定盐
        var salt = "1a2b3c4d";
        //进行拼装
        var str = "" + salt.charAt(0) + salt.charAt(2) + inputPass + salt.charAt(5) + salt.charAt(4);
        //加密
        /*var  = md5(str);*/
        document.getElementById("msmPassword").value = hex_md5(str);
    });
    $("#zhmm").click(function () {
        /*document.getElementById("zhmm").value="登陆中";*/
        //获取密码
        var inputPass = $("#password").val();
        //获取固定盐
        var salt = "1a2b3c4d";
        //进行拼装
        var str = "" + salt.charAt(0) + salt.charAt(2) + inputPass + salt.charAt(5) + salt.charAt(4);
        //加密
        /* var  = md5(str);*/
        document.getElementById("password").value = hex_md5(str);
    });
    $("#getMsgNum").click(function(){
        var memPhone=$("#memPhone").val();
        console.log(memPhone.length);
        if (memPhone==''||memPhone.length!=11)
        {
            $("#tishikuang").empty();
            $("#tishikuang").append("<a href='#' class='me-red' style='font-size: 0.85em;'>请输入正确的手机号!</a>");
            setTimeout(function () {
                $("#tishikuang a").css("display","none");
            },2000);
            return;
        }else {
            $.ajax({
                type: 'POST',
                url: '/phoneVerify',
                data: {
                    memPhone : memPhone
                },
                dataType: 'json',
                success: function(data) {
                    if(data){
                        timer();
                    }else{
                        window.alert("获取验证码失败");
                    }
                },
                error: function(data) {
                    alert('连接超时！');
                },
            });
        }
    })
    var wait = 60;
    //倒计时
    function timer() {
        if (wait == 0) {
            $("#getMsgNum").val("获取验证码");
            $("#getMsgNum").removeClass('orange');
            $("#getMsgNum").attr('class','ui positive button msg');
            $("#getMsgNum").removeAttr("disabled");
            wait = 60;
        } else {
            $("#getMsgNum").removeClass('positive');
            $("#getMsgNum").attr("disabled", "true").attr('class',' ui orange button msg');
            $("#getMsgNum").val(wait + "秒后重发");
            wait--;
            setTimeout(function () {
                timer()
            }, 1000);
        }
    }
</script>
</body>
</html>